import { NCheckbox, NSelect, NDrawer, NDrawerContent, NCollapse, NCollapseItem, NDataTable } from 'naive-ui'
import type { Column, Columns } from './index'

const selectOptions = [
  {
    label: '不固定',
    value: 'no',
  },
  {
    label: '左侧',
    value: 'left',
  },
  {
    label: '右侧',
    value: 'right',
  },
]

export default <Row,> ({ columns: rows }: { columns: Ref<Columns<Row>> }) => {


  const isShowSetting = ref(false)

  const showSetting = () => {
    isShowSetting.value = true
  }

  const cols: Columns<Column<Row>> = [
    {
      title: "列名",
      key: "title",
    },
    {
      title: "显示",
      key: "display",
      align: 'center',
      width: 50,
      render: (row) => (<NCheckbox v-model={[row.display, 'checked']} disabled={row.readOnly}></NCheckbox>)
    },
    {
      title: "冻结",
      key: "fixed",
      align: 'center',
      width: 70,
      render: (row) => (<NSelect
        value={ row.fixed ? row.fixed : 'no' }
        onUpdateValue={(val) => { row.fixed = val != 'no' ? val : undefined }}
        options={selectOptions}></NSelect>)
    }
  ]

  const TabseSetting = () => (
    <NDrawer v-model={[isShowSetting.value, 'show']} width="500">
      <NDrawerContent title="设置表格">
        <NCollapse display-directive="show" arrow-placement="right" default-expanded-names={['column']}>
          <NCollapseItem title="表格列" name="column">
            <NDataTable size="small" columns={cols} data={rows.value} >
            </NDataTable>
          </NCollapseItem>
        </NCollapse>
      </NDrawerContent>
    </NDrawer>
  )

  const columns = computed(()=> {
    const [left, no, right]: [Columns<Row>, Columns<Row>, Columns<Row>] = [[], [], []];
    rows.value.forEach(item => {
      if (!item.display) {
        return
      }
      let current = no;
      if (item.fixed === 'left') {
        current = left;
      } else if (item.fixed === 'right') {
        current = right;
      }
      current.push(item);
    })

    return [...left,...no,...right]
  })

  return {
    TabseSetting,
    showSetting,
    columns
  }
}
